<template>
  <div>
    <home>
      <div slot="conter" class="topaa" data-attr="添加专场">
        <a href="#">
          <h2>添加专场</h2>
        </a>
      </div>
      <div slot="context">
        <div class="a">
          <div class="b">
            <a href="#">添加专场</a>
            <div class="form_style">
              <div class="form-group">
                <label for="exampleInputEmail2">标题</label>
                <input type="text" class="form-control" id="exampleInputEmail2" placeholder="请填写标题"
                       v-model="content.title">
                <div class="erros" v-if="errors.title!==undefined">{{errors.title[0].message}}</div>
              </div>
              <div class="form-group">
                <label>全场保证金</label>
                <input type="number" min="1000" value="1000" class="form-control" placeholder="请填写全场保证金"
                       v-model="content.deposit">
              </div>
              <div class="form-group">
                <label>预展开始时间:</label>
                <vue-datepicker-local format="YYYY-MM-DD HH:mm:ss"
                                      v-model="content.preview_start_time"
                                      :disabled-date="disabledDate"
                                      clearable></vue-datepicker-local>
                <div class="erros" v-if="errors.preview_start_time!==undefined">
                  {{errors.preview_start_time[0].message}}
                </div>
              </div>
              <div class="form-group">
                <label>预展结束时间:</label>
                <vue-datepicker-local format="YYYY-MM-DD HH:mm:ss"
                                      v-model="content.preview_end_time"
                                      :disabled-date="disabledDate"
                                      clearable></vue-datepicker-local>
                <div class="erros" v-if="errors.preview_end_time!==undefined">{{errors.preview_end_time[0].message}}
                </div>
              </div>
              <br>
              <div class="form-group">
                <label>状态:</label>
                <select name="1" v-model.number="content.status">
                  <option value="1">未开拍</option>
                  <option value="2">预展中</option>
                  <option value="3">拍卖中</option>
                  <option value="4">已结束</option>
                </select>
              </div>

              <br>
              <button @click="BtnClick()" class="btn btn-primary">添加</button>
            </div>
          </div>
          <div class="c">
            <!-- --i是用来计算平面圆柱的动效延迟和距离的
            --w则是用来计算平面圆柱的宽度 -->
            <div class="d" style="--i:1;--w:1.5"></div>
            <div class="d" style="--i:2;--w:1.6"></div>
            <div class="d" style="--i:3;--w:1.4"></div>
            <div class="d" style="--i:4;--w:1.7"></div>
            <div class="e" style="--i:1"></div>
          </div>
          <div class="m">
            <div class="form-group">
              <label>拍卖开始时间:</label><br>
              <vue-datepicker-local
                      format="YYYY-MM-DD HH:mm:ss"
                      v-model="content.auction_start_time"
                      :disabled-date="disabledDate"

                      clearable/>
              <div class="erros" v-if="errors.auction_start_time!==undefined">{{errors.auction_start_time[0].message}}
              </div>
            </div>
            <div class="form-group">
              <label>拍卖结束时间:</label><br>
              <vue-datepicker-local
                      format="YYYY-MM-DD HH:mm:ss"
                      v-model="content.auction_end_time"
                      :disabled-date="disabledDate"
                      clearable></vue-datepicker-local>
              <div class="erros" v-if="errors.auction_end_time!==undefined">{{errors.auction_end_time[0].message}}</div>
            </div>
            <br>

          </div>
          <div class="n">
            <el-upload
                    class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :http-request="handleChange"
                    :on-remove="handleRemove"
                    :limit=1
                    :on-exceed="LimitClick"
                    :file-list="fileList"
                    list-type="picture">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>

          </div>
        </div>
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">
          <span>封面只能上传一张</span>
          <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
        </el-dialog>
      </div>
    </home>
  </div>

</template>

<script>
  import Home from "./Home";
  import {AddHomeAuction, TX_COS} from "network/home"
  import COS from 'cos-js-sdk-v5'
  import "font-awesome/css/font-awesome.min.css"
  import VueDatepickerLocal from 'vue-datepicker-local'

  export default {
    name: "HomeCreateAuction",
    components: {Home, VueDatepickerLocal},
    data() {
      return {
        content: {
          title: "",
          cover: 'https://wx-1304867879.cos.ap-guangzhou.myqcloud.com/1ccb7469d76d17be.jpg',
          deposit: "1000",
          status: "1",
          preview_start_time: "",
          preview_end_time: "",
          auction_start_time: null,
          auction_end_time: null
        },
        fileList: [],
        dialogVisible: false,
        errors: {}
      }
    },
    methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
            .then(_ => {
              done();
            })
            .catch(_ => {
            });
      },
      BtnClick() {
        AddHomeAuction(this.content).then(res => {
          if (res.status) {
            this.$router.push('/home').catch(err => {
            })
            console.log(res.message);
          } else {
            this.errors = res.message
            console.log(this.errors);
          }
        }, err => {
          console.log(err);
        })
      },
      disabledDate(time) {
        return time.getTime() < new Date().getTime()
      },
      // 获取文件对象
      handleChange(file, fileList) {
        let that = this
        TX_COS().then(data => {
              let file_name = this.randomString() + ".jpg"
              const cos = new COS({
                // 必选参数
                getAuthorization: (options, callback) => {
                  const obj = {
                    TmpSecretId: data.credentials.tmpSecretId,
                    TmpSecretKey: data.credentials.tmpSecretKey,
                    XCosSecurityToken: data.credentials.sessionToken,
                    StartTime: data.startTime, // 时间戳，单位秒，如：1580000000
                    ExpiredTime: data.expiredTime // 时间戳，单位秒，如：1580000900
                  }
                  callback(obj)
                }
              })
              cos.putObject({
                Bucket: 'wx-1304867879', /* 必须 */
                Region: 'ap-guangzhou',     /* 存储桶所在地域，必须字段 */
                Key: file_name,              /* 必须 */
                StorageClass: 'STANDARD',
                Body: file.file, // 上传文件对象
                onProgress: function (progressData) {

                  console.log(JSON.stringify(progressData));
                }
              }, function (err, data) {
                that.content.cover = 'https://wx-1304867879.cos.ap-guangzhou.myqcloud.com/' + file_name
                that.fileList[0] = {
                  name: file_name,
                  url: that.content.cover
                }
                console.log(that.content.cover, that.fileList);
              });
            }
        )
      },
      LimitClick(file, fileList) {
        console.log("超过上传");
        this.dialogVisible = true
        return fileList
      },
      randomString() {
        return Math.random().toString(36).slice(-8) + String(new Date().getTime())
      },
      handleRemove(file, fileList) {
        console.log(file);
        let that = this
        TX_COS().then(data => {
          const cos = new COS({
            // 必选参数
            getAuthorization: (options, callback) => {
              const obj = {
                TmpSecretId: data.credentials.tmpSecretId,
                TmpSecretKey: data.credentials.tmpSecretKey,
                XCosSecurityToken: data.credentials.sessionToken,
                StartTime: data.startTime, // 时间戳，单位秒，如：1580000000
                ExpiredTime: data.expiredTime // 时间戳，单位秒，如：1580000900
              }
              callback(obj)
            }
          })
          cos.deleteObject({
            Bucket: 'wx-1304867879', /* 必须 */
            Region: 'ap-guangzhou',     /* 存储桶所在地域，必须字段 */
            Key: this.fileList[0].name        /* 必须 */
          }, function (err, data) {
            console.log(err || data);
            that.content.cover = null
            that.fileList = []
          });
        })
      },
    }
  }
</script>

<style scoped>
  .form_style{

  }
  .form_style div {
    margin-bottom: 15px;
  }

  .m div {
    margin-bottom: 15px;
  }

  .erros {
    font-size: 13px;
    color: red;
    position: absolute;
  }

  .m {
    position: absolute;
    top: 268px;
    left: 330px;
  }

  .n {
    position: absolute;
    top: 501px;
    left: 334px;
  }

  .form_style button {
    margin-top: 5px;
    padding: 5px 10px;
  }

  .a {
    position: relative;
    width: 1000px;
    height: 700px;
    border: #fff 10px solid;
    /*background-color: rgb(120,140,200);*/
    background-color: #cccccc;
    top: 50px;
    left: 20%;
    border-radius: 20px;
    overflow: hidden;
  }

  .b {
    position: absolute;
    width: 200px;
    height: 300px;
    left: 0;
    margin: 75px 50px;
    transition: 1s;
  }

  .b a {
    text-decoration: none;
    color: #fff;
    font: 900 28px '';
  }

  .b h2 {
    /* 鼠标放开时的动画，第一个值是动画的过渡时间
    第二个值是延迟一秒后执行动画 */
    transition: .5s 1s;
    opacity: 0;
    color: rgb(30, 210, 200);
  }

  .b span {
    transition: .5s 1s;
    color: #fff;
    font: 500 15px '';
    position: absolute;
    top: 70px;
  }


  .c {
    position: absolute;
    top: -130px;
    right: -240px;
  }

  .d, .e {
    position: absolute;
    right: calc(var(--i) * 100px);
    width: calc(var(--w) * 40px);
    height: 500px;
    overflow: hidden;
    border-radius: 100px;
    transform: rotateZ(220deg) translate(0, 0);
    background: rgb(240, 220, 150);
    transition: .5s .5s;
  }

  .d:nth-child(2) {
    background: rgb(240, 190, 230);
  }

  .e {
    left: -470px;
    top: -140px;
    width: 70px;
    background-color: rgb(90, 220, 150);
  }


</style>